<template>
    <div id="friend">
        <div class="header" ref="header">
            <i class="close cubeic-close" @click="$emit('close')"></i>好友列表({{total}})
        </div>

        <div class="add" ref="add">
            <svg class="icon">
                <use xlink:href="#icon-yaoqinghaoyoulan"></use>
            </svg>
            <cube-button class="button" @click="showAddPoster">
                添加好友
            </cube-button>
        </div>

        <ul :style="{height:ul_height+'px'}">
            <cube-scroll ref="scroll" :options="scroll_options" @pulling-down="downRefresh" @pulling-up="upLoad">
                <li v-for="(item,index) in this.list.list" v-bind:key="item.name">
                    <img class="header" :src="item.header" />
                    <p class="name">{{item.name}}</p>
                    <p class="award-number" v-if="item.may_award">可开宝箱数量+{{item.open_count}}</p>
                    <img v-if="item.may_award && initBzNumber > 0" :data-click="1" @click="clickBz(index,$event)" class="bz animated infinite tada" src="../../images/open-loading.png" />
                </li>
            </cube-scroll>
        </ul>

        <!--S海报-->
        <keep-alive include="poster">
            <poster v-if="show_poster" @close="show_poster = false" :activity-id="activityId"></poster>
        </keep-alive>
        <!--E海报-->
    </div>
</template>

<script>
import poster from "../poster/Poster.vue";
export default{
    name:"friend",
    data(){
        return {
            ul_height:0,  //列表滚动高度
            show_poster:false,  //好友海报显示状态
            scroll_options:{  //滚动选项
                click:false,
                pullDownRefresh:{   //下拉刷新
                    threshold:60,
                    txt:"已刷新"
                },
                pullUpLoad:{   //上拉加载
                    txt:{
                        more:"上拉加载",
                        noMore:"---我也是有底线的---"
                    }
                }
            },
            down_doing:false,  //下拉中
            up_doing:false,  //上拉中
            list:{
                list:[],  //数据列表
                limit:[0,20]  //请求下标
            },
            total:0,   //好友总数
        };
    },
    props:{
        activityId:String,
        initBzNumber:Number  //活动初始可开宝箱数量
    },
    components:{
      poster
    },
    created(){
        this.getSystemFriendList();
        this.getList();
        this.getTotal();
    },
    mounted(){
        this.ul_height = document.documentElement.clientHeight - this.$refs.header.getBoundingClientRect().height - this.$refs.add.getBoundingClientRect().height;
    },
    methods:{
        //下拉刷新
        downRefresh(){
            if(this.down_doing) return;
            setTimeout(()=>{
                this.list.list = [];
                this.list.limit = [0,20];
                this.getSystemFriendList();
                this.getList();
                this.getTotal();
            },1000);
        },
        //上拉加载
        upLoad(){
            if(this.up_doing) return;
            this.getList();
        },
        //点击宝箱
        clickBz(_index,_this){
            if(_this.target.getAttribute("data-click") === "1"){
                let list = this.list.list[_index];
                _this.target.setAttribute("data-click","0");
                this.$request("friend/getAward",{
                    friend_id:list.id,
                    number:list.open_count,
                    from:list.from,
                    uid:this.$sysinfo.uid,
                    activity_id:this.activityId
                })
                    .then((res)=>{
                        var award = _this.target.parentNode.querySelector(".award-number");
                        if(res.data.status == "success"){
                            award.style = "display:block;";
                            award.className = "award-number animated fadeOutLeft";
                            _this.target.className = "bz animated fadeOutUp";
                            setTimeout(()=>{
                                list.may_award = 0;
                            },1000);
                            this.$emit("award",parseInt(list.open_count));
                        }else{
                            _this.target.setAttribute("data-click","1");
                            award.innerText = "领取失败";
                            award.style = "display:block;";
                            award.className = "award-number animated fadeOutLeft";
                        }
                    });
            }
        },
        //请求系统好友列表
        getSystemFriendList(){
            this.$request("friend/getFrontSystemFriendList",{
                activity_id:this.activityId,
                uid:this.$sysinfo.uid
            })
                .then((res)=>{
                    if(res.data.status == "success"){
                        let data = res.data.data;
                        data.forEach(item=>{
                            item.from = 2;
                        });
                        this.list.list.unshift(...res.data.data);
                    }
                });
        },
        //请求列表
        getList(){
            this.$request("friend/getList",{
                uid:this.$sysinfo.uid,
                activity_id:this.activityId,
                limit:this.list.limit
            })
                .then((res)=>{
                    if(res.data.status == "success"){
                        res.data.data.forEach(item=>{
                            item.from = 1;
                        });
                        this.list.list.push(...res.data.data);
                        this.list.limit[0] += this.list.limit[1];
                        this.$refs.scroll.forceUpdate(true,false);
                    }else{
                        this.$refs.scroll.forceUpdate(false,false);
                    }
                    this.$nextTick(()=>{
                        this.$refs.scroll.refresh();
                        this.down_doing = this.up_doing = false;
                    });
                });
        },
        //获取好友总数
        getTotal(){
           this.$request("friend/getTotal",{
               activity_id:this.activityId,
               uid:this.$sysinfo.uid
           })
               .then((res)=>{
                   if(res.data.status == "success"){
                       this.total = res.data.data;
                   }
               });
        },
        //点击添加好友显示海报
        showAddPoster(){
            this.show_poster = true;
        }
    }
};
</script>

<style src="./friend.less" lang="less" scoped></style>

<style lang="stylus">
    #friend ul .cube-pullup-wrapper
        color:#fff;
</style>
